{% include 'admin/header.html' %}

<body>
  <div class="lyear-layout-web">
    <div class="lyear-layout-container">
      {% include 'admin/nav.html' %}

      <main class="lyear-layout-content">
        <div class="container-fluid">
          <!-- 提示信息 -->
          <div class="alert alert-info" role="alert">
            <strong>提示:</strong> 请选择宿舍和月份，然后计算水电费用。
          </div>



          <!-- 显示备份操作的成功或失败消息 -->
          {% with messages = get_flashed_messages(with_categories=true) %}
            {% if messages %}
              <div class="alert alert-warning">
                <ul class="flash-messages mb-0">
                  {% for category, message in messages %}
                    <li class="flash-message {{ category }}">{{ message }}</li>
                  {% endfor %}
                </ul>
              </div>
            {% endif %}
          {% endwith %}

          <!-- 备份数据库 -->
          <div class="card shadow-sm mb-4">
            <div class="card-body">
              <h5 class="card-title">备份操作</h5>
              <form method="POST" action="" onsubmit="event.preventDefault(); backupDatabase();">
                <button type="submit" class="btn btn-warning btn-sm">备份数据库</button>
              </form>
            </div>
          </div>

          <!-- 备份文件列表 -->
          <div class="card shadow-sm">
            <div class="card-body">
              <h5 class="card-title">现有备份文件</h5>
              <table class="table table-striped table-bordered">
                <thead>
                  <tr>
                    <th>文件名</th>
                    <th>大小 (KB)</th>
                    <th>备份时间</th>
                  </tr>
                </thead>
                <tbody>
                  {% for file in backup_files %}
                    <tr>
                      <td>{{ file.filename }}</td>
                      <td>{{ file.size }}</td>
                      <td>{{ file.timestamp }}</td>
                    </tr>
                  {% endfor %}
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </main>
    </div>

    <!-- 底部区域 -->
    {% include 'admin/footer.html' %}
  </div>

  <script>
    // 前端备份数据库操作 (可以根据需要加入异步功能)
    function backupDatabase() {
      if (confirm('确认备份数据库吗？')) {
        // 提交表单进行备份操作
        document.querySelector('form').submit();
      }
    }
  </script>

</body>
